<template>
    <div class="youke">
        <Main>
            <van-nav-bar
                    title="注册"
                    left-arrow
                    fixed
                    @click-left="onBack()"
                    @click-right="$router.push({ path:'/user/login'})"
            >
                <span slot="right">去登陆</span>
            </van-nav-bar>

            <van-cell-group class="form-box">
                <van-field
                        v-model="requestParam.mobile"
                        required
                        clearable
                        label="手机号"
                        type="number"
                        maxlength="11"
                        placeholder="请输入手机号"
                />
                <van-field
                        v-model="requestParam.yzm"
                        required
                        center
                        clearable
                        type="number"
                        label="验证码"
                        placeholder="请输入短信验证码"
                >
                    <van-button
                            slot="button"
                            size="small"
                            type="primary"
                            :disabled="requestParam.mobile==''"
                            @click="yzmFun"
                    >{{mobilesendText}}
                    </van-button>
                </van-field>
            </van-cell-group>

            <van-cell-group class="form-box">
                <van-field v-model="requestParam.code" type="password" required clearable label="登录密码"
                           placeholder="登录密码"/>
                <van-field
                        v-model="codecheck"
                        required
                        type="password"
                        label="确认密码"
                        placeholder="请再次输入登录密码"
                />
            </van-cell-group>

            <van-cell-group class="form-box">
                <van-field
                        v-model="requestParam.passwo"
                        required
                        clearable
                        type="password"
                        label="交易密码"
                        placeholder="请输入交易密码"
                />
                <van-field
                        v-model="passwocheck"
                        required
                        type="password"
                        label="确认交易密码"
                        placeholder="请再次输入交易密码"
                />
            </van-cell-group>

            <van-cell-group class="form-box">
                <van-field v-model="requestParam.zcm" required readonly
                           clearable label="邀请码" placeholder="邀请码"/>
            </van-cell-group>
            <div class="footer">
                <van-radio-group v-model="radio">
                    <van-radio name="1">
                        注册前务必查看
                        <span class="protocol" @click="$router.push({ path:'/user/protocol'})">《用户协议》</span>
                    </van-radio>
                </van-radio-group>
                <van-button type="info" @click="doregister">注册</van-button>
            </div>
        </Main>
    </div>
</template>

<script type="text/ecmascript-6">
    import {check} from "../../ext/check";
    import {user} from "@/api";
    import {clearInterval} from 'timers';

    export default {
        //接收父级传递的参数
        props: [],
        //监听数据变化
        watch: {},
        data() {
            return {
                requestParam: {
                    mobile: "",
                    code: "",
                    passwo: "",
                    yzm: "",
                    zcm: this.$route.query.code ? this.$route.query.code : "",
                    point_id:this.$route.query.point_id >= 0 ? this.$route.query.point_id : 0
                },
                codecheck: "",
                passwocheck: "",
                radio: "0",
                mobilesend: true,
                mobilesendText: "发送验证码",
                times: null,
                timesText: 60,
            };
        },
        //实例初始化之前触发事件
        beforeCreate() {
        },
        //实例化之后触发事件
        created() {
        },
        //实时监控data参数数据变化
        watch: {
            requestParam: {
                handler() {
                    localStorage.setItem('requestParam', JSON.stringify(this.requestParam))
                },
                deep: true
            }
        },
        computed: {},
        //模板组件
        components: {},
        //执行方法
        methods: {
            doregister() {
                //数据验证；
                if (!check.mobile(this.requestParam.mobile)) {
                    this.$toast.fail("手机号码输入不正确");
                    return false;
                }
                if (!this.requestParam.code) {
                    this.$toast.fail("登录密码不能为空");
                    return false;
                }
                if (!this.codecheck) {
                    this.$toast.fail("确认登录密码不能为空");
                    return false;
                }
                if (this.codecheck != this.requestParam.code) {
                    this.$toast.fail("2次登录密码不一致");
                    return false;
                }
                if (!this.requestParam.passwo) {
                    this.$toast.fail("交易密码不能为空");
                    return false;
                }
                if (!this.passwocheck) {
                    this.$toast.fail("确认密码交易不能为空");
                    return false;
                }
                if (this.requestParam.passwo != this.passwocheck) {
                    this.$toast.fail("2次交易密码不一致");
                    return false;
                }
                if (!this.requestParam.yzm) {
                    this.$toast.fail("验证码不能为空");
                    return false;
                }
                if (!this.requestParam.zcm) {
                    this.$toast.fail("邀请码不能为空");
                    return false;
                }
                user.register(this.requestParam).then(res => {
                    if (res.code == "1000") {
                        localStorage.removeItem('requestParam');
                        this.$toast({
                            message: res.reason,
                            duration: 1000,
                            onClose: () => {
                                this.$router.push("/user/login");
                            }
                        });
                    }
                });
                // console.log(check.length(this.requestParam.mobile, 6, 6));
            },
            yzmFun() {
                if (this.mobilesend) {
                    this.mobilesend = false;
                    user.yzm({tel: this.requestParam.mobile}).then(res => {
                        if (res.code == 1000) {
                            this.timesfun()
                        } else {
                            this.mobilesend = true;
                            this.$toast.fail(res.reason);
                        }
                    });
                } else {
                }
            },
            timesfun() {
                let self = this
                self.mobilesendText = `重新获取(${self.timesText}s)`;
                let times = setInterval(function () {
                    self.timesText--;
                     self.mobilesendText = `重新获取(${self.timesText}s)`;
                    if (self.timesText <= 0) {
                        self.mobilesend = true;
                        self.mobilesendText = "发送验证码"
                        self.timesText = 60
                        window.clearInterval(times)
                    }


                }, 1000);
            }
        },
        mounted() {
            let requestParam = localStorage.getItem('requestParam');
            console.log(requestParam);
            if(requestParam){
                this.requestParam = JSON.parse(requestParam);
            }
        }
        //路由退出时候调用
        //beforeRouteLeave(to, from, next){next()}
    };
</script>
<style scoped lang="less">
    .form-box {
        margin-top: 0.5rem;
    }

    .footer {
        font-size: 14px;
        margin-left: 1rem;
        margin-top: 0.5rem;
        .protocol {
            color: #467ff2;
        }

        button {
            margin-top: 1rem;
            width: 96%;
            border-radius: 0.3rem;
        }
    }
</style>
